<template>
  <div>
     <div class="recommend-title">热销推荐</div>
     <ul>
         <router-link tag="li" :to="'/detail/' + item.id" class="item" v-for="(item,index) in recommendList" :key="index">      
                 <img class="item-img" :src="item.imgUrl">    
             <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{ item.desc}}</p>
                <p class="item-button">
                  <i>¥</i><span>{{item.price}}</span>起</p>
             </div>
       
         </router-link>
     </ul>
  </div>
</template>

<script>
export default {
 name:'HomeRecommend',
 data (){
     return{
     recommendList:[{
         id:"0001",
         imgUrl:'http://img1.qunarzz.com/sight/p0/1709/41/411f234d79457081a3.img.jpg_200x200_ea02ef99.jpg',
         title:'长隆野生动物世界',
         desc:'11213条评论',
         price:'258'
     },{
         id:"0002",
         imgUrl:'http://img1.qunarzz.com/sight/p0/1707/88/889ae02b07140066a3.img.jpg_200x200_d3b1427c.jpg',
         title:'长隆欢乐世界',
         desc:'14513条评论',
         price:'192'
     },{
         id:"0003",
         imgUrl:'http://img1.qunarzz.com/sight/p0/1603/3b/3bd311262ee06d8c90.img.jpg_200x200_c118d7da.jpg',
         title:'广州长隆旅游度假区',
         desc:'4513条评论',
         price:'87'
     },{
         id:"0004",
         imgUrl:'http://img1.qunarzz.com/sight/p0/1603/3c/3c514c20a740128b90.water.jpg_200x200_c7102a23.jpg',
         title:'南沙百万葵园',
         desc:'4476条评论',
         price:'133'
     },{
         id:"0005",
         imgUrl:'http://img1.qunarzz.com/sight/p0/1508/d9/12d379fbfee474d481da6e950b740ff3.water.jpg_200x200_4a3f867b.jpg',
         title:'增城金叶子温泉',
         desc:'2498条评论',
         price:'116'
     },{
         id:"0006",
         imgUrl:'http://img1.qunarzz.com/sight/p0/1601/3d/3dc7f222d6bca6a790.img.jpg_200x200_e0bb3017.jpg',
         title:'广州花城汇MAG环球魔幻世界',
         desc:'4596条评论',
         price:'128'
     }]
   }
  }
}
</script>

<style scoped>
 .recommend-title{
     margin-top:5px;
     line-height:20px;
     background:#eee;
     text-indent:10px;
 }
 .item{
     overflow: hidden;
     display:flex;
     height:100px;
    margin-left:-40px;
 
 }
 .item-img{
     width:95px;
     height:95px;
     padding:2px;
 }

 .item-info{
     flex:1
 }
 .item-title{
     line-height:30px;
     margin-top:5px;
     margin-left:10px;
 }
 .item-desc{
     color:#ccc;
    margin-left:10px;
    margin-top:-15px;
    font-size:10px;
 }
 .item-button{
   color:#616161;
   margin-left:10px;
   outline: no;
 }
 .item-button i{
     font-style:normal;
     font-size:12px;
      color:#ffa300;
 }
 .item-button span{
     font-size:20px;
     color:#ffa300;
 }
</style>
